1 กันยายน 2568ไทย

คู่มือฉบับสมบูรณ์ในการใช้ Frontend Performance API เพื่อรวบรวมและวิเคราะห์เมตริกการโหลดหน้าเว็บ เพื่อปรับปรุงประสิทธิภาพเว็บไซต์สำหรับผู้ใช้ทั่วโลก

การนำทาง Frontend Performance API: เชี่ยวชาญการเก็บเมตริกการโหลดหน้าเว็บ

ในโลกดิจิทัลปัจจุบัน ประสิทธิภาพของเว็บไซต์เป็นสิ่งสำคัญยิ่ง เว็บไซต์ที่โหลดช้าอาจนำไปสู่ผู้ใช้ที่หงุดหงิด การละทิ้งตะกร้าสินค้า และท้ายที่สุดคือการสูญเสียรายได้ การเพิ่มประสิทธิภาพฟรอนต์เอนด์ของคุณเป็นสิ่งสำคัญอย่างยิ่งในการมอบประสบการณ์ที่ดีแก่ผู้ใช้ ไม่ว่าผู้ใช้ของคุณจะอยู่ที่ใดทั่วโลก Frontend Performance API มีเครื่องมืออันทรงพลังสำหรับวัดและวิเคราะห์แง่มุมต่างๆ ของประสิทธิภาพการโหลดหน้าเว็บ คู่มือฉบับสมบูรณ์นี้จะแนะนำคุณตลอดการใช้ Navigation Timing API และอินเทอร์เฟซประสิทธิภาพอื่นๆ ที่เกี่ยวข้อง เพื่อรวบรวมและทำความเข้าใจเมตริกการโหลดหน้าที่สำคัญ ซึ่งจะช่วยให้คุณสามารถระบุคอขวดและปรับปรุงความเร็วและการตอบสนองของเว็บไซต์ของคุณสำหรับผู้ชมทั่วโลก

ทำความเข้าใจความสำคัญของเมตริกการโหลดหน้าเว็บ

เมตริกการโหลดหน้าเว็บให้ข้อมูลเชิงลึกอันมีค่าเกี่ยวกับความเร็วที่เว็บไซต์ของคุณโหลดและพร้อมให้ผู้ใช้โต้ตอบ เมตริกเหล่านี้มีความสำคัญอย่างยิ่งด้วยเหตุผลหลายประการ:

ประสบการณ์ผู้ใช้: เว็บไซต์ที่โหลดเร็วขึ้นจะมอบประสบการณ์ผู้ใช้ที่ราบรื่นและน่าพึงพอใจยิ่งขึ้น นำไปสู่การมีส่วนร่วมและความพึงพอใจที่เพิ่มขึ้น ลองนึกภาพผู้ใช้ในโตเกียวที่พยายามเข้าถึงไซต์อีคอมเมิร์ซของคุณ ประสบการณ์การโหลดที่ช้ามีแนวโน้มที่จะส่งผลให้พวกเขายกเลิกการซื้อ
อันดับ SEO: เครื่องมือค้นหาเช่น Google พิจารณาความเร็วของหน้าเว็บเป็นปัจจัยในการจัดอันดับ การเพิ่มประสิทธิภาพเว็บไซต์ของคุณสามารถปรับปรุงการมองเห็นในเครื่องมือค้นหาได้
อัตราการแปลง (Conversion Rates): การศึกษาต่างๆ แสดงให้เห็นความสัมพันธ์โดยตรงระหว่างเวลาในการโหลดหน้าเว็บและอัตราการแปลง หน้าเว็บที่โหลดเร็วขึ้นมักจะนำไปสู่อัตราการแปลงที่สูงขึ้น โดยเฉพาะอย่างยิ่งในภูมิภาคที่มีความเร็วอินเทอร์เน็ตต่ำ
การปรับให้เหมาะกับมือถือ: ด้วยการใช้อุปกรณ์มือถือที่เพิ่มขึ้น การปรับให้เหมาะกับประสิทธิภาพบนมือถือจึงเป็นสิ่งจำเป็น เวลาในการโหลดหน้าเว็บอาจส่งผลกระทบอย่างมีนัยสำคัญต่อประสบการณ์ของผู้ใช้มือถือ โดยเฉพาะในพื้นที่ที่มีแบนด์วิดท์จำกัด ตัวอย่างเช่น ผู้ใช้ในอินเดียที่ใช้การเชื่อมต่อ 3G จะชื่นชมเว็บไซต์ที่โหลดเร็วมากกว่าผู้ใช้ที่มีการเชื่อมต่อไฟเบอร์ความเร็วสูง
การเข้าถึงทั่วโลก: ประสิทธิภาพอาจแตกต่างกันอย่างมากตามตำแหน่งทางภูมิศาสตร์ สภาพเครือข่าย และความสามารถของอุปกรณ์ของผู้ใช้ การตรวจสอบประสิทธิภาพจากภูมิภาคต่างๆ สามารถช่วยระบุส่วนที่ต้องปรับปรุงได้

แนะนำ Frontend Performance API

Frontend Performance API คือชุดของอินเทอร์เฟซ JavaScript ที่ให้การเข้าถึงข้อมูลที่เกี่ยวข้องกับประสิทธิภาพสำหรับหน้าเว็บ API นี้ช่วยให้นักพัฒนาสามารถวัดแง่มุมต่างๆ ของเวลาในการโหลดหน้าเว็บ การโหลดทรัพยากร และลักษณะประสิทธิภาพอื่นๆ Navigation Timing API ซึ่งเป็นองค์ประกอบสำคัญของ Frontend Performance API ให้ข้อมูลเวลาโดยละเอียดเกี่ยวกับขั้นตอนต่างๆ ของกระบวนการโหลดหน้าเว็บ

องค์ประกอบสำคัญของ Performance API:

Navigation Timing API: ให้ข้อมูลเวลาเกี่ยวกับขั้นตอนต่างๆ ของกระบวนการโหลดหน้าเว็บ เช่น การค้นหา DNS, การเชื่อมต่อ TCP, เวลาในการร้องขอและการตอบสนอง และการประมวลผล DOM
Resource Timing API: ให้ข้อมูลเวลาสำหรับทรัพยากรแต่ละรายการที่โหลดโดยหน้าเว็บ เช่น รูปภาพ สคริปต์ และสไตล์ชีต ซึ่งมีค่าอย่างยิ่งในการทำความเข้าใจว่าเนื้อหาใดมีส่วนทำให้เวลาในการโหลดมากที่สุด โดยเฉพาะอย่างยิ่งเมื่อให้บริการรูปภาพที่มีความละเอียดต่างกันตามอุปกรณ์และภูมิภาค (เช่น การให้บริการรูปภาพ WebP แก่เบราว์เซอร์ที่รองรับเพื่อการบีบอัดที่ดีขึ้น)
User Timing API: ช่วยให้นักพัฒนาสามารถกำหนดเมตริกประสิทธิภาพที่กำหนดเองและทำเครื่องหมายจุดเฉพาะในโค้ดเพื่อวัดเวลาในการดำเนินการ
Paint Timing API: ให้เมตริกที่เกี่ยวข้องกับการเรนเดอร์เนื้อหาบนหน้าจอ เช่น First Paint (FP) และ First Contentful Paint (FCP)
Largest Contentful Paint (LCP): รายงานเวลาในการเรนเดอร์ของรูปภาพหรือบล็อกข้อความที่ใหญ่ที่สุดที่มองเห็นได้ภายใน viewport โดยเทียบกับเวลาที่หน้าเว็บเริ่มโหลดครั้งแรก นี่เป็นเมตริกหลักใน Core Web Vitals ของ Google
First Input Delay (FID): วัดเวลาตั้งแต่ผู้ใช้โต้ตอบกับหน้าเว็บเป็นครั้งแรก (เช่น เมื่อคลิกลิงก์ แตะปุ่ม หรือใช้คอนโทรลที่ขับเคลื่อนด้วย JavaScript) จนถึงเวลาที่เบราว์เซอร์สามารถเริ่มประมวลผล event handlers เพื่อตอบสนองต่อการโต้ตอบนั้นได้จริง
Cumulative Layout Shift (CLS): วัดผลรวมของการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิดทั้งหมดที่เกิดขึ้นตลอดอายุการใช้งานของหน้าเว็บ

การรวบรวมเมตริกการโหลดหน้าเว็บด้วย Navigation Timing API

Navigation Timing API ให้ข้อมูลมากมายเกี่ยวกับกระบวนการโหลดหน้าเว็บ ในการเข้าถึงข้อมูลนี้ คุณสามารถใช้คุณสมบัติ performance.timing ใน JavaScript

ตัวอย่าง: การรวบรวมข้อมูล Navigation Timing

นี่คือตัวอย่างวิธีการรวบรวมข้อมูล Navigation Timing และบันทึกลงในคอนโซล:


if (window.performance && window.performance.timing) {
  const timing = window.performance.timing;
  console.log('Navigation Start:', timing.navigationStart);
  console.log('Fetch Start:', timing.fetchStart);
  console.log('Domain Lookup Start:', timing.domainLookupStart);
  console.log('Domain Lookup End:', timing.domainLookupEnd);
  console.log('Connect Start:', timing.connectStart);
  console.log('Connect End:', timing.connectEnd);
  console.log('Request Start:', timing.requestStart);
  console.log('Response Start:', timing.responseStart);
  console.log('Response End:', timing.responseEnd);
  console.log('DOM Loading:', timing.domLoading);
  console.log('DOM Interactive:', timing.domInteractive);
  console.log('DOM Complete:', timing.domComplete);
  console.log('Load Event Start:', timing.loadEventStart);
  console.log('Load Event End:', timing.loadEventEnd);
}

สำคัญ: อ็อบเจกต์ performance.timing ได้ถูกเลิกใช้งานแล้วและแนะนำให้ใช้ PerformanceNavigationTiming แทน ขอแนะนำให้ใช้อย่างหลังสำหรับเบราว์เซอร์สมัยใหม่

การใช้ PerformanceNavigationTiming


if (window.performance && window.performance.getEntriesByType) {
  const navigationEntries = performance.getEntriesByType('navigation');

  if (navigationEntries && navigationEntries.length > 0) {
    const navigationEntry = navigationEntries[0];

    console.log('Navigation Type:', navigationEntry.type); // เช่น 'navigate', 'reload', 'back_forward'
    console.log('Navigation Start:', navigationEntry.startTime);
    console.log('Fetch Start:', navigationEntry.fetchStart);
    console.log('Domain Lookup Start:', navigationEntry.domainLookupStart);
    console.log('Domain Lookup End:', navigationEntry.domainLookupEnd);
    console.log('Connect Start:', navigationEntry.connectStart);
    console.log('Connect End:', navigationEntry.connectEnd);
    console.log('Request Start:', navigationEntry.requestStart);
    console.log('Response Start:', navigationEntry.responseStart);
    console.log('Response End:', navigationEntry.responseEnd);
    console.log('DOM Interactive:', navigationEntry.domInteractive);
    console.log('DOM Complete:', navigationEntry.domComplete);
    console.log('Load Event Start:', navigationEntry.loadEventStart);
    console.log('Load Event End:', navigationEntry.loadEventEnd);
    console.log('Duration:', navigationEntry.duration);


    // คำนวณ Time to First Byte (TTFB)
    const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
    console.log('TTFB:', ttfb);

    // คำนวณเวลาในการโหลด DOM
    const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading;
    console.log('DOM Load Time:', domLoadTime);

    // คำนวณเวลาในการโหลดหน้าเว็บ
    const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime;
    console.log('Page Load Time:', pageLoadTime);
  }
}

ทำความเข้าใจเมตริก Navigation Timing

นี่คือคำอธิบายของเมตริกสำคัญบางส่วนที่ Navigation Timing API มีให้:

navigationStart: เวลาที่การนำทางไปยังเอกสารเริ่มต้นขึ้น
fetchStart: เวลาที่เบราว์เซอร์เริ่มดึงข้อมูลเอกสาร
domainLookupStart: เวลาที่เบราว์เซอร์เริ่มค้นหา DNS สำหรับโดเมนของเอกสาร
domainLookupEnd: เวลาที่เบราว์เซอร์ค้นหา DNS สำหรับโดเมนของเอกสารเสร็จสิ้น
connectStart: เวลาที่เบราว์เซอร์เริ่มสร้างการเชื่อมต่อกับเซิร์ฟเวอร์
connectEnd: เวลาที่เบราว์เซอร์สร้างการเชื่อมต่อกับเซิร์ฟเวอร์เสร็จสิ้น พิจารณาผลกระทบของการใช้ CDN ในภูมิภาคต่างๆ CDN ที่กำหนดค่าไว้อย่างดีสามารถลดเวลาในการเชื่อมต่อสำหรับผู้ใช้ทั่วโลกได้อย่างมาก
requestStart: เวลาที่เบราว์เซอร์เริ่มส่งคำขอไปยังเซิร์ฟเวอร์
responseStart: เวลาที่เบราว์เซอร์ได้รับไบต์แรกของการตอบกลับจากเซิร์ฟเวอร์ นี่คือจุดเริ่มต้นสำหรับการวัด Time to First Byte (TTFB)
responseEnd: เวลาที่เบราว์เซอร์ได้รับไบต์สุดท้ายของการตอบกลับจากเซิร์ฟเวอร์
domLoading: เวลาที่เบราว์เซอร์เริ่มแยกวิเคราะห์เอกสาร HTML
domInteractive: เวลาที่เบราว์เซอร์แยกวิเคราะห์เอกสาร HTML เสร็จสิ้นและ DOM พร้อมใช้งาน ผู้ใช้สามารถโต้ตอบกับหน้าเว็บได้ แม้ว่าทรัพยากรบางอย่างอาจยังโหลดอยู่
domComplete: เวลาที่เบราว์เซอร์แยกวิเคราะห์เอกสาร HTML เสร็จสิ้นและทรัพยากรทั้งหมด (รูปภาพ, สคริปต์, ฯลฯ) โหลดเสร็จสิ้นแล้ว
loadEventStart: เวลาที่เหตุการณ์ load เริ่มต้นขึ้น
loadEventEnd: เวลาที่เหตุการณ์ load เสร็จสมบูรณ์ ซึ่งมักจะถือว่าเป็นจุดที่หน้าเว็บโหลดเสร็จสมบูรณ์แล้ว
duration: เวลารวมที่ใช้ในการนำทาง มีให้ใช้งานกับ PerformanceNavigationTiming

การวิเคราะห์เมตริกการโหลดหน้าเว็บเพื่อการเพิ่มประสิทธิภาพ

เมื่อคุณรวบรวมเมตริกการโหลดหน้าเว็บแล้ว ขั้นตอนต่อไปคือการวิเคราะห์เพื่อระบุส่วนที่ต้องปรับปรุง นี่คือกลยุทธ์สำคัญบางประการ:

1. ระบุคอขวด

โดยการตรวจสอบข้อมูล Navigation Timing คุณสามารถระบุขั้นตอนของกระบวนการโหลดหน้าเว็บที่ใช้เวลานานที่สุดได้ ตัวอย่างเช่น หาก domainLookupEnd - domainLookupStart สูง แสดงว่ามีปัญหาในการแก้ไข DNS หาก responseEnd - responseStart สูง แสดงว่าเวลาตอบสนองของเซิร์ฟเวอร์ช้าหรือขนาดเนื้อหาใหญ่

ตัวอย่าง: ลองนึกภาพสถานการณ์ที่ connectEnd - connectStart สูงกว่าอย่างมีนัยสำคัญสำหรับผู้ใช้ในอเมริกาใต้เมื่อเทียบกับผู้ใช้ในอเมริกาเหนือ นี่อาจบ่งชี้ถึงความจำเป็นในการใช้ CDN ที่มี points of presence (PoPs) ใกล้กับผู้ใช้ในอเมริกาใต้มากขึ้น

2. ปรับปรุงเวลาตอบสนองของเซิร์ฟเวอร์ (TTFB)

Time to First Byte (TTFB) เป็นเมตริกที่สำคัญซึ่งวัดเวลาที่เบราว์เซอร์ใช้ในการรับข้อมูลไบต์แรกจากเซิร์ฟเวอร์ TTFB ที่สูงอาจส่งผลกระทบอย่างมีนัยสำคัญต่อเวลาในการโหลดหน้าเว็บโดยรวม

กลยุทธ์ในการปรับปรุง TTFB:

ปรับปรุงโค้ดฝั่งเซิร์ฟเวอร์: ปรับปรุงประสิทธิภาพของโค้ดฝั่งเซิร์ฟเวอร์ของคุณเพื่อลดเวลาที่ใช้ในการสร้างการตอบสนอง HTML ใช้เครื่องมือโปรไฟล์เพื่อระบุคิวรีที่ช้าหรืออัลกอริทึมที่ไม่มีประสิทธิภาพ
ใช้ Content Delivery Network (CDN): CDN สามารถแคชเนื้อหาของเว็บไซต์ของคุณและให้บริการจากเซิร์ฟเวอร์ที่อยู่ใกล้กับผู้ใช้ของคุณมากขึ้น ซึ่งจะช่วยลดเวลาแฝงและปรับปรุง TTFB พิจารณา CDN ที่มีเครือข่ายทั่วโลกที่แข็งแกร่งเพื่อรองรับผู้ใช้ในภูมิภาคต่างๆ
เปิดใช้งานการแคช HTTP: กำหนดค่าเซิร์ฟเวอร์ของคุณให้ส่งส่วนหัวแคช HTTP ที่เหมาะสมเพื่อให้เบราว์เซอร์สามารถแคชเนื้อหาคงที่ได้ ซึ่งสามารถลดจำนวนคำขอไปยังเซิร์ฟเวอร์และปรับปรุง TTFB สำหรับการโหลดหน้าเว็บครั้งต่อไปได้อย่างมาก ใช้ประโยชน์จากการแคชของเบราว์เซอร์อย่างมีประสิทธิภาพ
ปรับปรุงคิวรีฐานข้อมูล: คิวรีฐานข้อมูลที่ช้าอาจส่งผลกระทบอย่างมีนัยสำคัญต่อ TTFB ปรับปรุงคิวรีของคุณโดยใช้ดัชนี หลีกเลี่ยงการสแกนตารางทั้งหมด และแคชข้อมูลที่เข้าถึงบ่อย
ใช้เว็บโฮสต์ที่เร็วขึ้น: หากเว็บโฮสต์ปัจจุบันของคุณช้า ให้พิจารณาเปลี่ยนไปใช้โฮสต์ที่เร็วขึ้น

3. ปรับปรุงการโหลดทรัพยากร

Resource Timing API ให้ข้อมูลโดยละเอียดเกี่ยวกับเวลาในการโหลดของทรัพยากรแต่ละรายการ เช่น รูปภาพ สคริปต์ และสไตล์ชีต ใช้ข้อมูลนี้เพื่อระบุทรัพยากรที่ใช้เวลาในการโหลดนานและปรับปรุงให้ดีขึ้น

กลยุทธ์ในการปรับปรุงการโหลดทรัพยากร:

บีบอัดรูปภาพ: ใช้เครื่องมือเพิ่มประสิทธิภาพรูปภาพเพื่อบีบอัดรูปภาพโดยไม่ลดทอนคุณภาพ พิจารณาใช้รูปแบบรูปภาพที่ทันสมัยเช่น WebP ซึ่งให้การบีบอัดที่ดีกว่า JPEG และ PNG ให้บริการรูปภาพที่มีความละเอียดต่างกันตามอุปกรณ์และขนาดหน้าจอของผู้ใช้โดยใช้องค์ประกอบ <picture> หรือเทคนิครูปภาพที่ปรับเปลี่ยนตามอุปกรณ์
ย่อขนาด CSS และ JavaScript: ลบอักขระและช่องว่างที่ไม่จำเป็นออกจากไฟล์ CSS และ JavaScript ของคุณเพื่อลดขนาด
รวมไฟล์ CSS และ JavaScript: รวมไฟล์ CSS และ JavaScript หลายไฟล์เป็นไฟล์น้อยลงเพื่อลดจำนวนคำขอ HTTP ใช้เครื่องมือเช่น Webpack, Parcel หรือ Rollup สำหรับการรวมไฟล์
เลื่อนการโหลดทรัพยากรที่ไม่สำคัญ: โหลดทรัพยากรที่ไม่สำคัญ (เช่น รูปภาพที่อยู่ด้านล่างของหน้า) แบบอะซิงโครนัสโดยใช้เทคนิคเช่น lazy loading
ใช้ CDN สำหรับเนื้อหาคงที่: ให้บริการเนื้อหาคงที่ (รูปภาพ, CSS, JavaScript) จาก CDN เพื่อปรับปรุงเวลาในการโหลด
จัดลำดับความสำคัญของทรัพยากรที่สำคัญ: ใช้ <link rel="preload"> เพื่อจัดลำดับความสำคัญของการโหลดทรัพยากรที่สำคัญ เช่น CSS และฟอนต์ เพื่อปรับปรุงการเรนเดอร์เริ่มต้นของหน้าเว็บ

4. ปรับปรุงการเรนเดอร์

ปรับปรุงวิธีการที่เว็บไซต์ของคุณเรนเดอร์เพื่อปรับปรุงประสบการณ์ผู้ใช้ เมตริกสำคัญ ได้แก่ First Paint (FP), First Contentful Paint (FCP) และ Largest Contentful Paint (LCP)

กลยุทธ์ในการปรับปรุงการเรนเดอร์:

ปรับปรุงการส่ง CSS: ส่ง CSS ในลักษณะที่ป้องกันการบล็อกการเรนเดอร์ ใช้เทคนิคเช่น critical CSS เพื่ออินไลน์ CSS ที่จำเป็นสำหรับ viewport เริ่มต้นและโหลด CSS ที่เหลือแบบอะซิงโครนัส
หลีกเลี่ยง JavaScript ที่ทำงานนาน: แบ่งงาน JavaScript ที่ทำงานนานออกเป็นส่วนย่อยๆ เพื่อป้องกันการบล็อกเธรดหลัก
ใช้ web workers: ย้ายงานที่ต้องใช้การคำนวณมากไปยัง web workers เพื่อหลีกเลี่ยงการบล็อกเธรดหลัก
ปรับปรุงการทำงานของ JavaScript: ใช้โค้ด JavaScript ที่มีประสิทธิภาพและหลีกเลี่ยงการจัดการ DOM ที่ไม่จำเป็น ไลบรารี Virtual DOM เช่น React, Vue และ Angular สามารถช่วยปรับปรุงการอัปเดต DOM ได้
ลดการเปลี่ยนแปลงเลย์เอาต์: ลดการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิดเพื่อปรับปรุงความเสถียรของภาพ จองพื้นที่สำหรับรูปภาพและโฆษณาเพื่อป้องกันไม่ให้เนื้อหากระโดดไปมาขณะที่หน้าเว็บโหลด ใช้เมตริก Cumulative Layout Shift (CLS) เพื่อระบุส่วนที่เกิดการเปลี่ยนแปลงเลย์เอาต์
ปรับปรุงฟอนต์: ใช้เว็บฟอนต์อย่างมีประสิทธิภาพโดยการโหลดล่วงหน้า ใช้ font-display: swap; เพื่อหลีกเลี่ยงข้อความที่มองไม่เห็น และใช้ชุดย่อยของฟอนต์เพื่อลดขนาดไฟล์ฟอนต์ พิจารณาใช้ฟอนต์ของระบบตามความเหมาะสม

5. ตรวจสอบประสิทธิภาพอย่างต่อเนื่อง

ประสิทธิภาพของเว็บไซต์ไม่ใช่การแก้ไขเพียงครั้งเดียว จำเป็นต้องตรวจสอบประสิทธิภาพอย่างต่อเนื่องเพื่อระบุและแก้ไขคอขวดใหม่ๆ ที่เกิดขึ้น ใช้เครื่องมือตรวจสอบประสิทธิภาพเพื่อติดตามเมตริกสำคัญเมื่อเวลาผ่านไปและตั้งค่าการแจ้งเตือนเพื่อแจ้งให้คุณทราบเมื่อประสิทธิภาพลดลง ตรวจสอบประสิทธิภาพของเว็บไซต์ของคุณเป็นประจำโดยใช้เครื่องมือเช่น Google PageSpeed Insights, WebPageTest และ Lighthouse พิจารณาใช้ Real User Monitoring (RUM) เพื่อรวบรวมข้อมูลประสิทธิภาพจากผู้ใช้จริงในสถานที่ต่างๆ

การใช้ User Timing API สำหรับเมตริกที่กำหนดเอง

User Timing API ช่วยให้คุณสามารถกำหนดเมตริกประสิทธิภาพที่กำหนดเองและวัดเวลาที่ใช้ในการดำเนินการส่วนของโค้ดที่เฉพาะเจาะจงได้ ซึ่งอาจมีประโยชน์สำหรับการติดตามประสิทธิภาพของส่วนประกอบที่กำหนดเองหรือการโต้ตอบของผู้ใช้ที่เฉพาะเจาะจง

ตัวอย่าง: การวัดเมตริกที่กำหนดเอง


// เริ่มการวัด
performance.mark('start-custom-metric');

// ดำเนินการบางอย่าง
// ... โค้ดของคุณที่นี่ ...

// สิ้นสุดการวัด
performance.mark('end-custom-metric');

// คำนวณระยะเวลา
performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric');

// รับค่าการวัด
const measures = performance.getEntriesByType('measure');
if (measures && measures.length > 0) {
  const customMetric = measures[0];
  console.log('Custom Metric Duration:', customMetric.duration);
}

Real User Monitoring (RUM) สำหรับข้อมูลเชิงลึกด้านประสิทธิภาพระดับโลก

ในขณะที่การทดสอบสังเคราะห์ (เช่น การใช้ Lighthouse) ให้ข้อมูลเชิงลึกที่มีค่า แต่ Real User Monitoring (RUM) ให้ภาพที่แม่นยำยิ่งขึ้นว่าเว็บไซต์ของคุณทำงานอย่างไรสำหรับผู้ใช้จริงในสถานที่ต่างๆ และภายใต้เงื่อนไขเครือข่ายที่หลากหลาย RUM รวบรวมข้อมูลประสิทธิภาพโดยตรงจากเบราว์เซอร์ของผู้ใช้และให้ข้อมูลเชิงลึกเกี่ยวกับเมตริกสำคัญเช่นเวลาในการโหลดหน้าเว็บ TTFB และอัตราข้อผิดพลาด พิจารณาใช้เครื่องมือ RUM ที่ช่วยให้คุณสามารถแบ่งกลุ่มข้อมูลตามภูมิศาสตร์ อุปกรณ์ เบราว์เซอร์ และประเภทเครือข่ายเพื่อระบุปัญหาประสิทธิภาพเฉพาะสำหรับกลุ่มผู้ใช้บางกลุ่ม

ข้อควรพิจารณาสำหรับการใช้ RUM ทั่วโลก:

ความเป็นส่วนตัวของข้อมูล: ตรวจสอบให้แน่ใจว่าปฏิบัติตามกฎระเบียบด้านความเป็นส่วนตัวของข้อมูลเช่น GDPR และ CCPA เมื่อรวบรวมข้อมูลผู้ใช้ ทำให้ข้อมูลที่ละเอียดอ่อนเป็นนิรนามหรือใช้นามแฝงเท่าที่เป็นไปได้
การสุ่มตัวอย่าง: พิจารณาใช้การสุ่มตัวอย่างเพื่อลดปริมาณข้อมูลที่รวบรวมและลดผลกระทบต่อประสิทธิภาพของผู้ใช้
การแบ่งส่วนตามภูมิศาสตร์: แบ่งกลุ่มข้อมูล RUM ของคุณตามภูมิภาคเพื่อระบุปัญหาประสิทธิภาพเฉพาะสำหรับสถานที่บางแห่ง
เงื่อนไขเครือข่าย: ติดตามประสิทธิภาพในประเภทเครือข่ายต่างๆ (เช่น 3G, 4G, Wi-Fi) เพื่อทำความเข้าใจว่าเงื่อนไขเครือข่ายส่งผลกระทบต่อประสบการณ์ของผู้ใช้อย่างไร

การเลือกเครื่องมือที่เหมาะสม

มีเครื่องมือหลายอย่างที่สามารถช่วยคุณรวบรวมและวิเคราะห์เมตริกการโหลดหน้าเว็บได้ ตัวเลือกยอดนิยมบางส่วน ได้แก่:

Google PageSpeed Insights: เครื่องมือฟรีที่วิเคราะห์ประสิทธิภาพของเว็บไซต์ของคุณและให้คำแนะนำในการปรับปรุง
WebPageTest: เครื่องมือฟรีที่ช่วยให้คุณทดสอบประสิทธิภาพของเว็บไซต์ของคุณจากสถานที่และเบราว์เซอร์ต่างๆ
Lighthouse: เครื่องมือโอเพนซอร์สที่ตรวจสอบประสิทธิภาพ การเข้าถึง และ SEO ของเว็บไซต์ของคุณ ซึ่งรวมอยู่ใน Chrome DevTools
New Relic: แพลตฟอร์มการตรวจสอบที่ครอบคลุมซึ่งให้ข้อมูลเชิงลึกแบบเรียลไทม์เกี่ยวกับประสิทธิภาพของเว็บไซต์ของคุณ
Datadog: แพลตฟอร์มการตรวจสอบและวิเคราะห์ที่นำเสนอการตรวจสอบผู้ใช้จริงและความสามารถในการทดสอบสังเคราะห์
Sentry: แพลตฟอร์มการติดตามข้อผิดพลาดและการตรวจสอบประสิทธิภาพที่ช่วยให้คุณระบุและแก้ไขปัญหาด้านประสิทธิภาพ

สรุป

การเพิ่มประสิทธิภาพฟรอนต์เอนด์เป็นกระบวนการต่อเนื่องที่ต้องการการตรวจสอบ การวิเคราะห์ และการเพิ่มประสิทธิภาพอย่างต่อเนื่อง โดยการใช้ Frontend Performance API และเครื่องมืออื่นๆ คุณจะได้รับข้อมูลเชิงลึกที่มีค่าเกี่ยวกับประสิทธิภาพของเว็บไซต์ของคุณและระบุส่วนที่ต้องปรับปรุง อย่าลืมพิจารณาถึงลักษณะที่เป็นสากลของผู้ชมของคุณและปรับปรุงให้เหมาะกับผู้ใช้ในสถานที่ต่างๆ และมีเงื่อนไขเครือข่ายที่แตกต่างกัน โดยการมุ่งเน้นไปที่ประสบการณ์ของผู้ใช้และการตรวจสอบประสิทธิภาพอย่างต่อเนื่อง คุณสามารถมั่นใจได้ว่าเว็บไซต์ของคุณจะมอบประสบการณ์ที่รวดเร็วและตอบสนองได้ดีสำหรับผู้ใช้ทุกคน ไม่ว่าพวกเขาจะอยู่ที่ใดในโลก การนำกลยุทธ์เหล่านี้ไปใช้จะช่วยให้คุณสร้างเว็บไซต์ที่เร็วขึ้น มีส่วนร่วมมากขึ้น และประสบความสำเร็จมากขึ้นสำหรับผู้ชมทั่วโลก